<template>
	<view class="login_main">
		<view class="lolgin_top">
			<image src="../../static/img/shouq.png" mode="widthFix"></image>
		</view>
		<view class="login_main_main">
			<text
				v-if="'shenqing_jindu'==from" class="t9">提示：<br>通过第三方应用授权，系统服务商取得商户授权;<br>商户授权后可在APP中发起收款，授权支付宝账号即为商家收款账号</text>
				
				<text
					v-else class="t9">提示：<br>此授权是为了商户和代理商能得到更精确的交易明细；<br>平台仅用在微信和支付宝第三方使用；<br>二维码有效期为1分钟，保存二维码后请尽快去微信和支付宝扫码授权。<br></text>
				<!-- v-if="from=='shenqing_jindu'" -->
			<view class="yqm" @click="getQrcode()" v-if="(isWx&&showWxCode) || !isWx">
				<image :src="src" mode="widthFix"></image>
				<text class="t9" style="text-align: center;margin-top: 2vw;">点击二维码可刷新</text>
			</view>
			<view class="tuic3 t15" @click="baocun()" v-if="from=='shenqing_jindu'">保存二维码</view>
			
			<view class="input-wrap mt-80" v-if="isWx">
				<view class="title">手机号:</view>
				<input type="text" placeholder="请输入手机号" placeholder-style="color:#ccc" @input="onPhoneInput"/>
			</view>
			
			<view class="input-wrap mt-30" v-if="isWx">
				<view class="title">验证码:</view>
				<input type="text" placeholder="请输入验证码" placeholder-style="color:#ccc" @input="onCodeInput"/>
				<view class="title code" v-if="show" @click="getCodeNumber">获取验证码</view>
				<view class="title code" v-if="!show">{{count}} s</view>
			</view>
			
			
			<view class="input-wrap mt-60" style="margin-left: 40upx;" v-if="isWx">
				<view class="btn btn1" @click="auth()">微信授权</view>
			</view>
			<view class="input-wrap mt-60" style="margin-left: 40upx;">
				<view class="btn btn1" @click="wxAuth()">切换为{{type}}授权方式</view>
				<!-- <view class="btn" style="margin-left: 30upx;" @click="aliAuth()">支付宝授权方式</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mainid: '',
				src: '',
				yqm: '',
				from:'',
				show:true,
				phone:'',
				verifyCode:'',
				count: '',
				timer: null,
				code:'',
				isWx:true,
				type:'支付宝',
				openId:'',
				showWxCode:false
			}
		},
		onLoad(option) {
			this.from = option.from
			if('shenqing_jindu' == this.from){
				//进件申请进度中跳转过来
				uni.setNavigationBarTitle({
					title: "支付宝授权"
				});
				this.src = option.aliTokenUrl
				return
			}
			uni.getStorage({
				key: 'user',
				success: res=> {
					this.mainid = res.data.id;
					this.ewm();
					
				}
			});

		},
		methods: {
			check(){
				if(!this.phone){
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					});
					return false
				}
				if(!this.verifyCode){
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					});
					return false
				}
				return true
			},
			wxAuth(){
				this.isWx = !this.isWx
				if(this.isWx){
					this.type = '支付宝'
				}else {
					this.type = '微信'
				}
				
			},
			auth(){
				if(this.check()){
					// uni.login({
					//   provider: 'weixin',
					//   onlyAuthorize:true,
					//   success: loginRes=> {
					//     console.log(loginRes);
					// 	if(loginRes){
					// 		// this.openId = loginRes.authResult.openid
					// 		this.code = loginRes.code
					// 		this.bindThirdId()
					// 	}
					//   }
					// });
					
					//验证码校验
					let datas = {
						id: this.mainid,
						phone:this.phone,
						smscode:this.verifyCode
					}
					console.log('校验请求参数：',datas);
					uni.request({
						header: {
							'Content-Type': 'application/json', //自定义请求头信息
						},
						url: getApp().globalData.url + 'user/smsVerify' , //仅为示例，并非真实接口地址。
						method: 'POST',
						data: datas,
						success: (res) => {
							console.log('校验结果：',res);
							if(res.data.status == 200){
								this.showWxCode = true
								uni.showToast({
									title:'请扫描二维码完成授权',
									icon:'none'
								})
							}else{
								uni.showToast({
									title:res.data.msg,
									icon:'none'
								})
							}
						},
						fail: (error) => {
							console.log(error)
						}
					});
					
				}
			},
			aliAuth(){
				this.isWx = false
				// if(this.check()){
				// 	console.log('11111111')
				// 	uni.login({
				// 	  provider: 'alipay',
				// 	  success: loginRes=> {
				// 	    console.log(loginRes);
				// 		if(loginRes.code){
				// 			this.bindThirdId()
				// 		}
				// 	  },
				// 	  fail: (err) => {
				// 	  	console.log('err：',err);
				// 	  }
				// 	});
				// }
			},
			baocun() {
				// this.src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1730713693,2130926401&fm=26&gp=0.jpg';
				uni.downloadFile({
					url: this.src,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					}
				})
				// uni.saveImageToPhotosAlbum({
				// 	filePath: this.src,
				// 	success: function() {
				// 		console.log('保存图片成功');
				// 	}
				// });
			},
			getQrcode(){
				if('shenqing_jindu' == this.from){
					//进件申请进度中跳转过来
				}else{
					// 个人中心系统设置列表跳转过来
					this.ewm();
				}
			},
			ewm() {
				var that = this;
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'user/getBindThirdIdQRCode/' + that.mainid, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: that.mainid
					},
					success: (res) => {
						uni.hideLoading(); //关闭加载动画
						console.log('获取二维码：',res);
						if (res.data.status == '200') {
							// that.yqm = res.data.data.shareCode;
							that.src = res.data.data;
						}
					},
					fail: (error) => {
						// this.checks = true
						console.log(error)
					}
				});
			},
			
			onPhoneInput(e){
				this.phone = e.detail.value
				console.log('手机号:',this.phone)
			},
			onCodeInput(e){
				this.verifyCode = e.detail.value
				console.log('verifyCode:',this.verifyCode)
			},
			
			getCodeNumber(){
				if(!this.phone){
					uni.showToast({
						title: '请输入手机号',
						icon:'none',
						duration: 2000
					});
					return
				}
				uni.request({
					header: {
						'content-type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'user/sendVerificationCode/'+this.phone, //仅为示例，并非真实接口地址。
					method: 'POST',
					// data: {
					// 	phone: this.tel
					// },
					success: (res) => {
						if (res.data.status == 200) {
							uni.showToast({
								title: '发送验证码成功',
								icon:'none',
								icon: 'success',
								duration: 2000
							});
							const timeCount = 60;
							if (!this.timer) {
							  this.count = timeCount
							  this.show = false;
							  this.timer = setInterval(() => {
							    if (this.count > 0 && this.count <= timeCount) {
							      this.count--;
							    } else {
							      clearInterval(this.timer);
							      this.timer = null,
							      this.show = true
							    }
							  }, 1000)
							}
						}
					}
				});
				
			},
			
			bindThirdId(){
				let datas = {
						id: this.mainid,
						plat: 3,
						smscode: this.verifyCode,
						phone:this.phone,
						code:this.code
					}
				console.log('请求参数:',datas)
				uni.request({
					header: {
						'content-type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'user/bindThirdId', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						// code: this.code,
						id: this.mainid,
						plat: 3,
						smscode: this.verifyCode,
						phone:this.phone,
						openId:this.openId
					},
					success: (res) => {
						console.log('请求结果:',res)
						if (res.data.status == 200) {
							uni.showToast({
								title:'授权成功'
							})
						}else{
							uni.showToast({
								title:res.data.msg
							})
						}
					}
				});
				
			},
			
			
		}
	}
</script>

<style>
	.login_main {

		width: 100%;
		height: auto;
		min-height: 100vh;
		max-height: 220vw;
		display: block;
		float: left;
		/* 	background: url(../../static/img/login.png) no-repeat top center; */
		background: #039542;
		background-size: auto 100%;
	}

	.login_main_main {
		width: 90%;
		height: auto;
		display: block;
		float: left;
		margin: 0 5%;
		border-radius: 7vw;
		padding: 10vw 0;
	}

	.login_main_main text {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		/* text-align: center; */
	}

	.yqm {
		width: 44vw;
		height: 44vw;
		display: block;
		float: left;
		background: #eee;
		margin: 0 18vw;
		margin-top: 15vw;
	}

	.yqm image {
		width: 44vw;
		height: 44vw;
		display: block;
		float: left;
	}

	.login_main_zhu {
		width: 54.5vw;
		height: 8vw;
		line-height: 8vw;
		display: block;
		float: left;
		margin: 1vw 12.8vw;
	}

	.login_main_zhuce {
		width: auto;
		height: 8vw;
		line-height: 8vw;
		display: block;
		float: left;
	}

	.login_main_wangji {
		width: auto;
		height: 8vw;
		line-height: 8vw;
		display: block;
		float: right;
	}

	.login_main_but {
		width: 64.8vw;
		height: 13vw;
		display: block;
		float: left;
		margin: 2vw 7.6vw;
		line-height: 13vw;
		text-align: center;
		background: #f1c75e;
		border-radius: 6.5vw;
		background-size: 100%;
	}

	.login_zd {
		width: 100%;
		height: auto;
		display: block;
		float: left;
	}

	.login_zd_t {
		width: 4vw;
		height: 4vw;
		border: 1px solid #f1c75e;
		margin-left: 8vw;
		margin-top: 4vw;
		display: block;
		float: left;
	}

	.login_zd text {
		width: auto;
		height: 8vw;
		line-height: 8vw;
		display: block;
		float: left;
		margin-top: 2vw;
		margin-left: 3vw;
	}

	.act {
		background: #f1c75e;
	}

	.login_bg1 {
		width: 50vw;
		height: 50vw;
		border-radius: 50%;
		position: fixed;
		background: #F1C75E;
		right: -10vw;
		top: -15vw;
		z-index: 1;
	}

	.login_bg2 {
		width: 120vw;
		height: 200vw;
		border-radius: 50%;
		position: fixed;
		background: #F1C75E;
		right: -40vw;
		top: 0vw;
		z-index: 1;
		opacity: 0.5;
	}

	.lolgin_top {
		width: auto;
		height: auto;
		text-align: center;
		margin-top: 15vw;
		/* position: fixed;
		top: 20vw;
		left: 10vw; */
	}

	.lolgin_top image {
		width: 20vw;
		height: auto;
	}

	.lolgin_top font {
		width: 100%;
		height: auto;
		display: block;
		float: left;
	}

	.tuic3 {
		width: 80%;
		height: 14vw;
		display: block;
		float: left;
		text-align: center;
		line-height: 14vw;
		border: 1px solid #FFFFFF;
		margin: 0 10%;
		margin-top: 15vw;
		margin-bottom: 15vw;
		border-radius: 7vw;
	}
	
	.input-wrap {
		display: block;
		float: left;
		white-space: nowrap;
	}
	.input-wrap input{
		height: 80upx;
		color: white;
		font-size: 32upx;
		border: 2upx solid #FFFFFF;
		width: 340upx;
		padding-left: 20upx;
		margin-left: 30upx;
		float: left;
	}
	.input-wrap .title{
		float: left;
		color: white;
		font-size: 32upx;
		height: 80upx;
		line-height: 80upx;
	}
	.input-wrap .code{
		text-align: center;
		border: 2upx solid #FFFFFF;
		margin-left: 20upx;
		padding: 0 10upx;
		border-radius: 6upx;
	}
	.input-wrap .btn{
		width: 300upx;
		margin: auto;
		text-align: center;
		font-size: 36upx;
		height: 80upx;
		line-height: 80upx;
		color: white;
		border: 2upx solid #FFFFFF;
		border-radius: 6upx;
		float: left;
	}
	.input-wrap .btn1{
		width: 600upx;
		margin: auto;
		text-align: center;
		font-size: 36upx;
		height: 80upx;
		line-height: 80upx;
		color: white;
		border: 2upx solid #FFFFFF;
		border-radius: 6upx;
		float: left;
	}
	.mt-60{
		margin-top: 60upx;
	}
	.mt-80{
		margin-top: 80upx;
	}
	.mt-100{
		margin-top: 100upx;
	}
	.mt-30{
		margin-top: 30upx;
	}
	.ml-30{
		margin-left: 30upx;
	}
</style>
